<template>
  <div>
    <nav class="tags-nav">
      <div>
        <el-button icon="el-icon-back" size="medium" type="primary" @click="getBackToMain">返回</el-button>
        <div class="tag-title">
          {{ title }}
        </div>
      </div>
      <el-button size="mini" type="primary" @click="getToModel" v-if="!(roles.administrator)">
        {{ turnTo }}
      </el-button>
    </nav>
    <basic-container style="margin-top: 1em">
      <tags-model v-if="view === 'model'" :offerId="offerId"></tags-model>
      <pc-add-tags-type v-if="roles.administrator && view === 'edit'"></pc-add-tags-type>
      <bc-add-tags-type v-if="!roles.administrator && view === 'edit'"></bc-add-tags-type>
    </basic-container>
  </div>
</template>

<script>
import tagsModel from "@/views/system/components/tagsComponent/tagsModel"
import PcAddTagsType from "@/views/system/components/pcAddTagsType";
import {mapGetters} from "vuex";
import BcAddTagsType from "@/views/system/components/bcAddTagsType";

export default {
  name: "creativeTagsConfig",
  props: {
    offerId: String
  },
  data() {
    return {
      title: '素材标签配置',
      turnTo: '命名模板',
      view: 'edit'
    }
  },
  computed: {
    ...mapGetters(["userInfo", "roles"]),
  },
  components: {
    BcAddTagsType,
    PcAddTagsType,
    tagsModel,
  },
  watch: {
    offerId: {
      deep: true,
      handler(val) {
        if (val) {
          this.view = 'model'
        }
      }
    }
  },
  created() {
    if (this.offerId) {
      this.view = 'model'
      this.turnTo = '编辑标签'
    }
  },
  methods: {
    //返回全局配置主页
    getBackToMain() {
      this.$parent.config = 'main'
    },
    //跳转模板界面
    getToModel() {
      if (this.view === 'edit') {
        this.turnTo = '编辑标签';
        this.view = 'model'
      } else {
        this.view = 'model';
        this.turnTo = '命名模板';
        this.view = 'edit'
      }
    },
  }
}
</script>

<style scoped lang="scss">
.tags-nav {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 0 2em;
  margin-top: 1em;

  :nth-child(1) {
    display: flex;
  }

  .tag-title {
    margin-left: 3em;
    line-height: 37px;
    font-weight: 600;
  }
}

</style>
